import React from 'react'
import { withRouter} from 'react-router-dom'
class TopBar extends React.Component{
    constructor(props){
        super(props)
        this.state={
            Tab:this.props.Tab,
            top:0
        }
    }
    
    componentWillMount(){
        window.addEventListener('scroll', this.handleScroll)
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.handleScroll)
    }

    render(){
        let chooseColor = '#007FFF'
        let color = '#71777C'
        return(
            <div onScroll={()=>this.handleScroll()}>
                <div className='topBar' style={{height:46,width:375,backgroundColor:'white',display:'flex',position:'fixed',overflow:'scroll',zIndex:'100',top:this.state.top===0?'60px':'0px'}}>
                    <div className='Recommend' onClick={()=>this.props.history.push('/')} style={{width:52,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Recommend'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        推荐
                    </div>
                    <div className='Backend' onClick={()=>this.props.history.push('/Backend')} style={{width:52,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Backend'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        后端
                    </div>
                    <div className='Frontend' onClick={()=>this.props.history.push('/Frontend')} style={{width:52,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Frontend'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        前端
                    </div>
                    <div className='Android' onClick={()=>this.props.history.push('/Android')} style={{width:80,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Android'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        Android
                    </div>
                    <div className='IOS' onClick={()=>this.props.history.push('/IOS')} style={{width:52,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'IOS'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        IOS
                    </div>
                    <div className='Ai' onClick={()=>this.props.history.push('/AI')} style={{width:80,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Ai'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        人工智能
                    </div>
                    <div className='Freebie' onClick={()=>this.props.history.push('/Freebie')} style={{width:80,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Freebie'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        开发工具
                    </div>
                    <div className='Career' onClick={()=>this.props.history.push('/Career')} style={{width:80,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Career'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        代码人生
                    </div>
                    <div className='Article' onClick={()=>this.props.history.push('/Article')} style={{width:52,fontSize:'14px',lineHeight:'46px',textAlign:'center',fontFamily:'"Microsoft YaHei"',color:'Article'===this.state.Tab? chooseColor: color,flexShrink:'0',cursor:'pointer'}}>
                        阅读
                    </div>
                </div>
            </div>
        )
    }
    handleScroll=()=>{
        let b = document.documentElement.scrollTop
        if(b>100&&this.state.top===0)
            {
                this.setState({
                    top:1
                })
            }
        if(b<100)
        {
            this.setState({
                top:0
            })
        }
    }
}
export default withRouter(TopBar)